<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缴费信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="<%=url%>">
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/layui/2.6.5/layui.min.js"></script>
    <link href="https://lib.baomitu.com/layui/2.6.5/css/layui.min.css" rel="stylesheet">
    <style type="text/css">
        #input-limit{
            height: 30px;
            background-color: #1e9fff;
            color: whitesmoke;
            width: 60px;
            border:1px #1e9fff;
            border-radius: 4px;
        }

        #input-limit:hover{
            background-color:#bbdaff;
        }
        /*.layui-layer{*/
            /*top: 100px !important;*/
        /*}*/
    </style>
</head>
<body>

<div id="update-layer" style="display: none; padding: 20px">
    <form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form">
        <table class="layui-table" lay-even="" lay-skin="row">
            <tr>
                <th>药品名称</th>
                <th>药品数量</th>
                <th>药品单价</th>
                <th>药品小计</th>
            </tr>
            <tbody id="bodybut">

            </tbody>
            <tr >
                <td colspan="4" style="text-align: center">总计:<span id="zong">00.00</span>元</td>
            </tr>
        </table>
    </form>
</div>


<div class="layui-main">
    <!-- 表格上方标题 -->
    <blockquote class="layui-elem-quote">药品缴费信息列表</blockquote>
    <div style="padding-left: 50px">
        <!--<a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">ID查询:</span><input type="text" placeholder="请输入ID" id="input-uid" style="height: 30px"></a>-->
        <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">姓名查询:</span><input type="text" placeholder="请输入姓名" id="input-uname" style="height: 30px"></a>
        <button   id="input-limit">搜索</button>
    </div>
    <hr/>
    <!-- 学生信息表 -->
    <table id="tbl" lay-filter="tbl"></table>
    <script type="text/html" id="tbl-toolbar">
        <!--<a class="layui-btn layui-btn-xs" lay-event="edit">体检信息</a>-->
        <a class="layui-btn layui-btn-xs" lay-event="del" >药品详情</a>
    </script>
</div>
</body>
</html>
<script>

    var UpIndex;
    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        table.render({
            elem: '#tbl',
            url: '/Medcharge/queryList',
            method: 'get',
            //无数据的时候显示的提示信息
            text:{
                none:'当前无缴费记录'
            },
            initSort: { //排序
                field: 'visitdate' //排序字段，对应 cols 设定的各字段名
                , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            },
            cols: [[
                {field: 'diaid', title: '药单编号'},
                {field: 'uname', title: '患者姓名',},
                {field: 'visid', title: '患者卡号',},
                {field: 'name', title: '取药医生'},
                {field: 'dgtime', title: '取药时间',templet: "<div>{{layui.util.toDateString(d.dgtime, 'yyyy-MM-dd')}}</div>", width: 130},
                {field: 'price', title: '消费金额'},
                {toolbar: '#tbl-toolbar', title: '操作', width: 200}
            ]],
            page: {
                limit: 5,//指定每页显示的条数
                limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
            }//开启分页

            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            },
            id: 'tbl'
        });
        table.on('tool(tbl)', function (obj) {
            // 获取当前行数据和lay-event的值
            var data = obj.data;
            var event = obj.event;
        if (event === 'del') {
            var diaid = data.diaid;
            $("#bodybut").empty();
            $("#zong").text("00.00");
            $.get("/Medcharge/queryListById", {diaid: diaid}, function (data) {
                var u = 0;
                if(data!=null){
                    UpIndex= layer.open({
                        type: 1,
                        title: '购买药品信息',
                        skin: 'layui-layer-molv',
                        area: ['500px'],
                        content: $('#update-layer')
                    });
                    for (var i = 0; i < data.length; i++) {
                        u += data[i].subtotal
                        var tr = "<tr>"
                        tr += "<td>" + data[i].ypname + "</td>"
                        tr += "<td>" + data[i].ypnum + data[i].unitname + "</td>"
                        tr += "<td>" + data[i].price + "元/" +data[i].unitname+"</td>"
                        tr += "<td>" + data[i].subtotal + "元" + "</td>"
                        tr += "</tr>";
                        $("#bodybut").append(tr);
                    }
                    $("#zong").text(u)
                }else {
                    alert("查看失败")
                }
            })
        }
        })


        $("#input-limit").click(function () {
            var dname=$("#input-uname").val();
            table.render({
                elem: '#tbl',
                url: '/Medcharge/queryListlimit?dname='+dname,
                method: 'get',
                //无数据的时候显示的提示信息
                text:{
                    none:'当前无缴费记录'
                },
                initSort: { //排序
                    field: 'dgtime' //排序字段，对应 cols 设定的各字段名
                    , type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                },
                cols: [[
                    {field: 'diaid', title: '药单编号'},
                    {field: 'uname', title: '患者姓名',},
                    {field: 'visid', title: '患者卡号',},
                    {field: 'name', title: '取药医生'},
                    {field: 'dgtime', title: '取药时间',templet: "<div>{{layui.util.toDateString(d.dgtime, 'yyyy-MM-dd')}}</div>", width: 130},
                    {field: 'price', title: '消费金额'},
                    {toolbar: '#tbl-toolbar', title: '操作', width: 200}
                ]],
                page: {
                    limit: 5,//指定每页显示的条数
                    limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
                }//开启分页

                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    } else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };
                },
                id: 'tbl'
            });
        })

    })


</script>